<template>
  <div class="page-hero">
    <hero-top></hero-top>
    <div
      v-if="module"
      class="banner d-flex flex-column jc-end"
      :style="{ 'background-image': `url(${module.banner})` }"
    >
      <div class="info text-white p-3">
        <div class="hero-title">{{ module.title }}</div>
        <div class="hero-name">{{ module.name }}</div>
        <div class="hero-location">
          {{ module.categories.map((n) => n.name).join("/") }}
        </div>
        <div class="d-flex jc-between">
          <ul class="hero-scores d-flex">
            <li>
              难度<span class="bg-primary mx-1">{{
                module.scores.attack
              }}</span>
            </li>
            <li>
              技能<span class="bg-blue mx-1">{{
                module.scores.difficult
              }}</span>
            </li>
            <li>
              攻击<span class="bg-danger mx-1">{{ module.scores.skills }}</span>
            </li>
            <li>
              生存<span class="bg-dark mx-1">{{ module.scores.survive }}</span>
            </li>
          </ul>
          <router-link to="/" tag="div" class="text-grey fs-sm"
            >更多皮肤 &gt;</router-link
          >
        </div>
      </div>
    </div>
    <!-- end of top -->
    <div v-if="module" class="px">
      <!-- swiper 导航 -->
      <div class="nav bg-white jc-around py-2 sborder-bottom">
        <div class="nav-item active">
          <div class="nav-link">英雄出识</div>
        </div>
        <div class="nav-item">
          <div class="nav-link">进阶攻略</div>
        </div>
      </div>
      <swiper>
        <swiper-slide>
          <div>
            <!-- 导航链接 -->
            <div class="bg-white p-3 d-flex">
              <router-link
                to="/"
                v-slot="{ navigate }"
                class="btn btn-lg text-grey3 flex-1 mr-2"
              >
                <button @click="navigate">
                  <i class="iconfont icon-menu1"></i>
                  英雄介绍视频
                </button>
              </router-link>
              <router-link
                to="/"
                v-slot="{ navigate }"
                class="btn btn-lg text-grey3 flex-1"
              >
                <button @click="navigate">
                  <i class="iconfont icon-menu1"></i>
                  一图识英雄
                </button>
              </router-link>
            </div>
            <!-- 技能 -->
            <div class="skills border-bottom pb-3  bg-white">
              <!-- 技能图标 -->
              <div class="d-flex jc-around mb-4">
                <img
                  @click="currentSkillIndex = i"
                  class="skill-icon"
                  :class="{active: currentSkillIndex === i}"

                  :src="item.icon"
                  :alt="item.name"
                  v-for="(item, i) of module.skills"
                  :key="item._id"
                />
              </div>
              <!-- 技能详情 -->
              <div class="d-flex mt-3 px-3 ai-center">
                <h3 class="skill-name mr-3">{{this.currentSkill.name}}</h3>
                <span>(冷却值：{{this.currentSkill.delay}}消耗:{{this.currentSkill.cost}})</span>
              </div>
              <div class="px-3">
                {{this.currentSkill.description}}
              </div>
            </div>
            <!-- 出装推荐 -->
             <h-card title="出装推荐" icon="card-hero">
               <div class="border-bottom pb-2 mb-3">
                 <p class="fs-xxl pb-3">顺风出装</p>
                 <ul class="d-flex">
                  <li class="build-img d-flex  flex-1 flex-column ai-center jc-center" v-for="item in this.module.items1" :key="item._id">
                    <img :src="item.icon" :alt="item.name">
                    <span class="fs-sm mt-2">{{item.name}}</span>
                  </li>
                 </ul>
               </div>
               <div>
                 <p class="fs-xxl pb-3">逆风出装</p>
                 <ul class="d-flex">
                  <li class="build-img d-flex  flex-1 flex-column ai-center jc-center" v-for="item in this.module.items2" :key="item._id">
                    <img :src="item.icon" :alt="item.name">
                    <span class="fs-sm mt-2">{{item.name}}</span>
                  </li>
                 </ul>
               </div>
             </h-card>

             <h-card title="使用技巧" icon="card-hero">
               <div>{{this.module.usageTips}}</div>
             </h-card>
             <h-card title="对抗技巧" icon="card-hero">
               <div>{{this.module.battleTips}}</div>
             </h-card>
             <h-card title="团战思路" icon="card-hero">
               <div>{{this.module.teamTips}}</div>
             </h-card>
             <h-card title="英雄关系" icon="card-hero">
               <div></div>
             </h-card>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import HeroTop from '@/components/header/HeroTop.vue'

export default {
  components: { HeroTop },
  name: 'hero',
  component: {
    HeroTop
  },
  props: {
    id: { required: true }
  },
  data () {
    return {
      module: null,
      currentSkillIndex: 0
    }
  },
  computed: {
    currentSkill () {
      return this.module.skills[this.currentSkillIndex]
    }
  },
  methods: {
    async fetch () {
      const res = await this.$http.get(`/heroes/${this.id}`)
      this.module = res.data
      // console.log(this.module)
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/_variables.scss';
.page-hero {
  .banner {
    height: 35vh;
    background: #fff no-repeat center top;
    background-size: cover;
    .info {
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
      .hero-scores {
        li {
          vertical-align: middle;
          span {
            display: inline-block;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            line-height: 18px;
            text-align: center;
            transform: scale(0.77);
          }
        }
      }
    }
  }
  .skills {
    .skill-icon {
      width: 5.3846rem;
      height: 5.3846rem;
      border: 2px solid rgba(255, 255,255, 0);
       border-radius: 45%;
      &.active {
        border: 2px solid map-get($colors, 'primary1');
      }
    }
    .skill-name{
      font-weight: 900;
      font-size: 1.3846rem
    }
  }
  .build-img{
    text-align: center;
    img {
      width: 3.8462rem;
      height: 3.8462rem;
      border-radius: 50%;
    }
  }
}
</style>
